<template>
	<view class="button-box h50" v-if="height == '50rpx'">
		<u-button customStyle="border-radius:12rpx" :text="text" :loading="loading" :disabled="disabled" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" @click="handleChange"></u-button>
	</view>
	<view class="button-box h60" v-if="height == '60rpx'">
		<u-button customStyle="border-radius:12rpx" v-if="type == 'default'" type="primary" :plain="true" :text="text" :loading="loading" :disabled="disabled" @click="handleChange"></u-button>
		<u-button customStyle="border-radius:12rpx" v-if="type == ''" :text="text" :loading="loading" :disabled="disabled" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" @click="handleChange"></u-button>
	</view>
	<view class="button-box h70" v-if="height == '70rpx'">
		<u-button customStyle="border-radius:12rpx" :text="text" :loading="loading" :disabled="disabled" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" @click="handleChange"></u-button>
	</view>
	<view class="button-box" v-if="height != '50rpx' && height != '60rpx' && height != '70rpx'">
		<u-button customStyle="border-radius:12rpx" :text="text" :loading="loading" :disabled="disabled" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" @click="handleChange"></u-button>
	</view>
</template>

<script setup>
	import {ref,defineProps} from 'vue'
	
	// 定义props
	const props = defineProps({
	  text: String,
		disabled:{
			default:false,
			type:Boolean
		},
		type:{
			default:'',
			type:String
		},
		loading:{
			default:false,
			type:Boolean
		},
		height:{
			default:'80rpx',
			type:String
		},
		handleChange: Function
	});
</script>
<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>
<style lang="scss" scoped>
	.button-box{
		::v-deep .u-button{
			height: 80rpx;
		}
	}
	
	.h50{
		::v-deep .u-button{
			height: 50rpx;
		}
	}
	.h60{
		::v-deep .u-button{
			height: 60rpx;
		}
	}
	.h70{
		::v-deep .u-button{
			height: 70rpx;
		}
	}
</style>